import React from 'react'
import type {MenuProps} from 'antd'
import {Menu} from 'antd'
import {AppstoreOutlined, MailOutlined, SettingOutlined} from '@ant-design/icons'
import {useSelector} from 'react-redux'
import {RootState} from '../../../store'
import {routes} from '../../../router'
import _ from 'lodash'
import styles from '../Home.module.scss'
import {Link, matchRoutes, useLocation} from 'react-router-dom'

type MenuItem = Required<MenuProps>['items'][number]

const items: MenuItem[] = [
	{
		key: 'sub1',
		label: 'Navigation One',
		icon: <AppstoreOutlined />,
		children: [
			{
				key: 'g1',
				label: 'Item 1',
				icon: <SettingOutlined />,
			},
			{
				key: 'g2',
				label: 'Item 2',
				icon: <MailOutlined />,
			},
		],
	},
]
export default function HomeAside() {
	const permission = useSelector((state: RootState) => state.users.infos.permission) as unknown[] || []
	const location = useLocation()
	const matchs = matchRoutes(routes, location)
	const subPath = matchs![0].pathnameBase || ''
	const path = matchs![1].pathnameBase || ''
	const menus = _.cloneDeep(routes).filter((v) => {
		v.children = v.children?.filter((item) => item.meta?.menu && permission.includes(item.name))
		return v.meta?.menu && permission.includes(v.name)
	})
	const items: MenuProps['items'] = menus.map((v1) => {
		const children = v1.children?.map((v2) => {
			return {
				key: v1.path! + v2.path!,
				label: <Link to={v1.path! + v2.path!}>{v2.meta?.title}</Link>,
				icon: v2.meta?.icon,
			}
		})
		return {
			key: v1.path!,
			label: v1.meta?.title,
			icon: v1.meta?.icon,
			children,
		}
	})
	return (
		<Menu selectedKeys={[path]} openKeys={[subPath]} mode='inline' items={items} className={styles['home-aside']} />
	)
}
